<template>
  <div class="container">
    <header>分类</header>
    <main>
      
      <van-tabs v-model="activeName" title-active-color="#000">
        <ul>
          <li>
            <div  @click="click($event)" >
              <div class="city">北京<i class="iconfont">&#xe639;</i></div>
            </div>
          </li>
          <li >
            <div  @click="click($event)">
              <div class="time">全部时间<i class="iconfont">&#xe639;</i></div>
            </div>
          </li>
          <li >
            <div @click="click($event)">
              <div class="sort">推荐排序<i class="iconfont">&#xe639;</i></div>
            </div>
          </li>
          <li>
            <div @click="click($event)">
              <div class="distance">
                距离最近<i class="iconfont">&#xe639;</i>
              </div>
            </div>
          </li>
        </ul>
        <div class="border"></div>
        <van-tab v-for="(title, index) in titleObj" :title="title.message" sticky>
         
          <template v-if="title.message=='全部'">
            
              <All></All>
          </template>
          <template  v-if="title.message=='演唱会'">
          
               <Common type="Song">
                 <template #default="{list}">
                   <Song :list="list"></Song> 
                 </template>
                 
               </Common>
          </template>
           <template  v-if="title.message=='话剧歌剧'">
          
                <Common type="Speak">
                 <template #default="{list}">
                   <Speak :list="list"></Speak> 
                 </template>
                 
               </Common>
          </template>
           <template  v-if="title.message=='音乐会'">
          
                <Common type="Music">
                 <template #default="{list}">
                   <Speak :list="list"></Speak> 
                 </template>
                 
               </Common>
          </template>
           <template  v-if="title.message=='展览休闲'">
          
                <Common type="Arder">
                 <template #default="{list}">
                   <Speak :list="list"></Speak> 
                 </template>
                 
               </Common>
          </template>
           <template  v-if="title.message=='曲苑杂坛'">
          
                <Common type="Discuss">
                 <template #default="{list}">
                   <Speak :list="list"></Speak> 
                 </template>
                 
               </Common>
          </template>
           <template  v-if="title.message=='舞蹈芭蕾'">
          
                <Common type="Dance">
                 <template #default="{list}">
                   <Speak :list="list"></Speak> 
                 </template>
                 
               </Common>
          </template>
           <template  v-if="title.message=='体育比赛'">
          
                <Common type="Sport">
                 <template #default="{list}">
                   <Speak :list="list"></Speak> 
                 </template>
                 
               </Common>
          </template>
          <template  v-if="title.message=='儿童亲子'">
          
                <Common type="Children">
                 <template #default="{list}">
                   <Speak :list="list"></Speak> 
                 </template>
                 
               </Common>
          </template>
         
        
        </van-tab>
      </van-tabs>
      <div class="search">
        <i class="iconfont">&#xe65c;</i>
      </div>
      
    </main>
  </div>
</template>






<script>
import Vue from "vue";
import { Tab, Tabs, Toast } from "vant";
Vue.use(Tab);
Vue.use(Tabs);
import All from './All'
import Song from './Song'
import Speak from './Speak'
import Music from './Music'
import Arder from './Arder'
import Discuss from './Discuss'
import Dance from './Dance'
import Sport from './Sport'
import Children from './Children'
import Common from '../../../components/Common'




export default {
  data() {
    return {
      titleObj: [
        { message: "全部" },
        { message: "演唱会" },
        { message: "话剧歌剧" },
        { message: "音乐会" },
        { message: "展览休闲" },
        { message: "曲苑杂坛" },
        { message: "舞蹈芭蕾" },
        { message: "体育比赛" },
        { message: "儿童亲子" }
      ],

      activeName: "a"
    };
  },
   components: {
    
    All,
    Song,
    Speak,
    Music,
    Arder,
    Discuss,
    Dance,
    Sport,
    Children,
    Common
   
  },
  methods: {
    click($event) {
     
  
      // $($event).addClass("changeStyle").siblings().removeClass("changeStyle")  
      if( document.querySelector("changeStyle")){
          $event.currentTarget.className = " " ;
      }else{
         $event.currentTarget.className = "changeStyle";
      }
       
    },
   
  }
};
</script>

<style lang='stylus' scoped>
@import '../../../assets/border.styl';

.changeStyle {
  color: red;
}

.container {
  height 100% 

  header {
    height: 0.44rem;
    line-height: 0.44rem;
    font-size: 0.16rem;
    text-align: center;
    color: #000;
    background-color: pink;
  }

  main {
    position: relative;
    flex 1
    overflow hidden

    ul {
      display: flex;
      justify-content: left;
      align-items: center;
      padding-top: 0.1rem;

      li {
        flex: 1;
        font-size: 0.13rem;
        color: #9c9ca4;

        i {
          font-size: 0.005rem;
          margin-left: 0.02rem;
        }

        .city {
          margin-left: 0.15rem;
        }
      }
    }

    .search {
      width: 0.44rem;
      height: 0.44rem;
      top: 0;
      right: 0.1rem;
      line-height: 0.44rem;
      text-align: center;
      position: absolute;

      i {
        font-size: 0.2rem;
        color: #3c3f43;
        font-weight: bold;
      }
    }
    .border{
      
      width 100%
      height .18rem
      border_1px(0 0 1px 0)
      margin-bottom 0.17rem
      
    }
     
  }
}
</style>


<style lang="stylus">
.van-tabs__wrap {
  display: flex;
  justify-content: left;
  align-items: center;
  padding-top: 0.1rem;
}

.van-tabs {
  height: 100%;
}

.van-tabs__line {
  bottom: 0.09rem;
}

.van-tab {
  font-size: 0.15rem;
  color: #9c9ca4;
}

.van-tabs__nav {
  width: 70%;
}
.van-tabs__content
  height calc(100% - .5rem)
  overflow-y scroll
</style>

